import Icon from '@/component/Icon'
import { Popup } from 'antd-mobile'
import style from './index.module.scss'
import classnames from 'classnames'
import React, { useEffect, useState } from 'react'
import {
  AppThunk,
  useAppDispatch,
  useAppSelector,
  useInitState
} from '@/store/hook'
import {
  deleteUserChannelsAction,
  getChannelsAction,
  patchUserChannelsAction
} from '@/store/reducers/home'
import { TChannels } from '@/api'
const _ = require('lodash')
export declare type TPopup = {
  visible: boolean
  close: () => void
  changeActive: (active: number) => void
}
export default function Channel ({ visible, close, changeActive }: TPopup) {
  const dispatch = useAppDispatch()
  // 用户频道,高亮
  const { channels, active } = useAppSelector(state => state.homer)
  // 全部频道
  const { allChannels } = useInitState(getChannelsAction as AppThunk, 'homer')
  // 剩余频道
  const [otherChannels, setOtherChannels] = useState<TChannels[]>([])

  // 筛选剩余频道
  useEffect(() => {
    setOtherChannels(() => {
      return _.differenceBy(allChannels, channels, 'id')
    })
    return () => {}
  }, [channels, allChannels])

  // 添加频道
  const addChanels = (channel: TChannels) => {
    dispatch(patchUserChannelsAction([channel]))
  }

  // 删除频道
  const delChannel = (channel: TChannels) => {
    dispatch(deleteUserChannelsAction(channel))
  }

  // 设置编辑按钮
  const [edit, setEdit] = useState<boolean>(false)

  return (
    <Popup visible={visible} bodyStyle={{ height: '100vh' }}>
      <div className={style.root}>
        <div className='channel-header'>
          <Icon type='iconbtn_channel_close' onClick={close} />
        </div>
        <div className='channel-content'>
          {/* 编辑时，添加类名 edit */}
          <div className={classnames(['channel-item', edit && 'edit'])}>
            <div className='channel-item-header'>
              <span className='channel-item-title'>我的频道</span>
              <span className='channel-item-title-extra'>点击进入频道</span>
              <span
                className='channel-item-edit'
                onClick={() => setEdit(!edit)}
              >
                {edit ? '完成' : '编辑'}
              </span>
            </div>
            <div className='channel-list'>
              {/* 选中时，添加类名 selected */}
              {channels.map(v => {
                return (
                  <span
                    onClick={() => changeActive(v.id)}
                    key={v.id}
                    className={classnames([
                      'channel-list-item',
                      v.id === active && 'selected'
                    ])}
                  >
                    {v.name}
                    <Icon
                      type='iconbtn_tag_close'
                      onClick={() => delChannel(v)}
                      stopPropagation={true}
                    />
                  </span>
                )
              })}
            </div>
          </div>

          <div className='channel-item'>
            <div className='channel-item-header'>
              <span className='channel-item-title'>频道推荐</span>
              <span className='channel-item-title-extra'>点击添加频道</span>
            </div>
            <div className='channel-list'>
              {otherChannels.map(v => (
                <span
                  onClick={() => addChanels(v)}
                  key={v.id}
                  className='channel-list-item'
                >
                  + {v.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </Popup>
  )
}
